<template>
  <div class="Header">
    <div class="Header_LEFT">
      <!-- <div class="Header_tubiao">
        <img class="Header_img" src="../assets/images/GeRen_rw/logo.png" alt />
      </div>-->
      <div class="Header_tubiao" @mousemove="mousemove" @mouseout="mouseout">
        <div class="ll">
          <!-- <img class="Header_img" src="../assets/images/GeRen_rw/logo.png" alt /> -->
          <div class="imgs">
            <img src="../assets/images/GeRen_rw/u138.png" alt />
          </div>
          <div class="rights">
            <div class="hy">杰信销售</div>
          </div>
        </div>
        <div :class="['rr',{sc:isc}]">
          <img src="../assets/images/GeRen_rw/u164.png" alt />
        </div>
      </div>
      <div class="Header_mingcheng">宏运集团管理系统</div>
      <div class="Header_time">{{nowTime}}</div>
    </div>
    <div class="Header_right">
      <div class="Header_company" @click="Header_qiehuan">
        <img class="Header_Icon" src="../assets/images/GeRen_rw/u211.png" alt />
        <p class="Header_apan">集团切换</p>
      </div>
      <div class="Header_setup" @click="Header_paw">
        <img class="Header_Icon" src="../assets/images/GeRen_rw/u203.png" alt />
        <p class="Header_apan">设置</p>
      </div>
      <div class="Header_signout" @click="out">
        <img class="Header_Icon" src="../assets/images/GeRen_rw/u195.png" alt />
        <p class="Header_apan">退出</p>
      </div>
    </div>
    <!-- 设置 -->
    <el-dialog class="dialog" title="设置" :visible.sync="dialogVisibles" width="600px">
      <div class="color_box"></div>
      <div class="toux">
        <span class="span">头像</span>
        <el-upload
          class="imgsd"
          action="/apis/PublicAPI.asmx/UpImg"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <img class="imgsd" src="../assets/images/GeRen_rw/u276.png" alt /> -->
        <div class="hezi">
          <span class="span1d">点击图片修改头像</span>
          <!-- <div class="img1d">
              <img src="../assets/images/GeRen_rw/u314.png" alt />
          </div>-->
        </div>
      </div>
      <div class="contents">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item style="width:95%" label="联系电话">
            <el-input v-model="form.phone"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="紧急联系电话">
            <el-input v-model="form.warnphone"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="电子邮箱">
            <el-input v-model="form.email"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="现居住地">
            <el-input v-model="form.address"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="原密码">
            <el-input v-model="form.oldPwd" type="password"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="新密码">
            <el-input v-model="form.newPwd" type="password"></el-input>
          </el-form-item>
          <el-form-item style="width:95%" label="确认密码">
            <el-input v-model="form.qrPwd" type="password"></el-input>
          </el-form-item>
        </el-form>
        <div class="ebb">
          <el-button size="small" type="primary" @click="onSubmit">确认</el-button>
          <el-button size="small" type="info" @click="dialogVisibles=false">取消</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 退出 -->
    <el-dialog title="退出系统" :visible.sync="dialogVisiblesds" width="500px">
      <div class="color_box"></div>
      <div class="contents">
        <!-- <el-form ref="form" :model="form" label-width="80px"> -->
        <el-button type="text">确定退出系统？</el-button>
        <div class="ebb">
          <el-button size="small" type="primary" @click="HeaderBtn">确认</el-button>
          <el-button size="small" type="info" @click="dialogVisiblesds=false">取消</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- <div
      class="red"
      @click="jianghuai"
      v-show="show1"
      @mousemove="mousemoves"
      @mouseout="mouseouts"
    >
      <div class="tu_top">
        <img class="img" src="../assets/images/GeRen_rw/u170.png" alt />
        <div class="jh">江淮客车</div>
      </div>
      <div class="tu_btn">Jiang Huai vehicle</div>
    </div> -->
    <!-- <div class="reds" v-show="show2" @mousemove="mousemoves" @mouseout="mouseouts">
      <div class="imgs">
        <img src="../assets/images/GeRen_rw/u138.png" alt />
      </div>
      <div class="rights">
        <div class="hy">杰信空调</div>
      </div>
    </div> -->
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      nowTime: "",
      dialogVisibles: false,
      dialogVisiblesds: false,
      form: {
        phone: "",
        warnphone: "",
        email: "",
        address: "",
        oldPwd: "",
        newPwd: "",
        qrPwd: ""
      },
      show1: false,
      show2: false,
      isc: false,
      imageUrl: "",
      empno: "",
      imageUrls: "",
      imageUrlss: ""
    };
  },
  created() {
    this.empno = JSON.parse(localStorage.getItem("message")).Id;
    // this.getData()
    this.nowTimes()
  },
  methods: {
    // 获取信息
    // getData() {
    //   var obj = {
    //     empno: this.empno
    //   }
    //   var objs = JSON.stringify(obj)
    //   axios('/apis/PublicAPI.asmx/UpdataMess?index=1&jsondata=' + objs).then(
    //     ({ data }) => {
    //       var datas = this.$x2js.xml2js(data)
    //       var list = JSON.parse(datas.string.__text)
    //       console.log(list)
    //       this.form.phone = list.phone
    //       this.form.warnphone = list.warnphone
    //       this.form.email = list.email
    //       this.form.address = list.address
    //       this.form.oldPwd = list.oldpwd
    //       this.imageUrl = list.photo2
    //     }
    //   )
    // },
    handleAvatarSuccess(res, file) {
      var datas = this.$x2js.xml2js(res)
      // console.log(datas)
      this.imageUrls = datas.UpFileReturn.fullurl
      this.imageUrlss = datas.UpFileReturn.url
      this.imageUrl = datas.UpFileReturn.fullurl
      console.log(this.imageUrl)
      console.log(this.imageUrls)
      console.log(this.imageUrlss)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear()
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? '0' + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1
      let date =
        new Date(timeStamp).getDate() < 10
          ? '0' + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate()
      let hh =
        new Date(timeStamp).getHours() < 10
          ? '0' + new Date(timeStamp).getHours()
          : new Date(timeStamp).getHours()
      let mm =
        new Date(timeStamp).getMinutes() < 10
          ? '0' + new Date(timeStamp).getMinutes()
          : new Date(timeStamp).getMinutes()
      let ss =
        new Date(timeStamp).getSeconds() < 10
          ? '0' + new Date(timeStamp).getSeconds()
          : new Date(timeStamp).getSeconds()
      let week = new Date(timeStamp).getDay()
      let weeks = ['日', '一', '二', '三', '四', '五', '六']
      let getWeek = '星期' + weeks[week]
      this.nowTime =
        year +
        '年' +
        month +
        '月' +
        date +
        '日' +
        ' ' +
        getWeek +
        ' ' +
        hh +
        ':' +
        mm +
        ':' +
        ss
    },
    nowTimes() {
      this.timeFormate(new Date())
      setInterval(this.nowTimes, 1000)
      this.clear()
    },
    clear() {
      clearInterval(this.nowTimes)
      this.nowTimes = null
    },
    Header_paw() {
      this.dialogVisibles = true
      this.getData()
    },
    // 集团切换
    Header_qiehuan() {
      this.$router.push('./selectByEnt')
    },
    // 修改个人信息
    onSubmit() {
      var obj = {
        // empno: this.empno,
        Creater: this.empno,
        // photo: this.imageUrlss,
        setphone: this.form.phone,
        setemergencytel: this.form.warnphone,
        setemail: this.form.email,
        setaddress: this.form.address,
        setlastpass: this.form.oldPwd,
        setpass: this.form.newPwd,
        setsurepass: this.form.qrPwd
      };
      var objs = JSON.stringify(obj);
      axios("/apis/ComAPI.asmx/Saveset?jsondata=" + objs).then(
        ({ data }) => {
          var datas = this.$x2js.xml2js(data);
          // var list = JSON.parse(datas.string.__text);
          console.log(datas);
          if (datas.string.__text == "修改成功") {
            this.$message.success("信息修改成功");
            this.dialogVisibles = false;
            this.getData();
            localStorage.setItem("php", JSON.stringify(this.imageUrl));
          } else {
            this.$message.error(datas.string.__text);
          }
        }
      );
    },
    HeaderBtn() {
      localStorage.clear();
      this.$router.push('./')
    },
    out() {
      this.dialogVisiblesds = true
    },
    // 跳转江淮项目
    jianghuai() {
      // window.open('http://112.80.41.34:7003/#/PersonalCenterHmPg?index=1')
    },
    // 鼠标移入
    mousemove() {
      this.show1 = true
      this.show2 = true
      this.isc = true
    },
    mouseout() {
      this.show1 = false
      this.show2 = false
      this.isc = false
    },
    mousemoves() {
      this.show1 = true
      this.show2 = true
    },
    mouseouts() {
      this.show1 = false
      this.show2 = false
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";
.Header {
  // width: 100%;
  height: 60px;
  background-color: $Header_color;
  min-width: 1400px;
  overflow: hidden;
}
.Header_LEFT {
  width: 850px;
  height: 59px;
  float: left;
  // border: 1px solid #000;
  overflow: hidden;
  // min-width: 780px;
}
.Header_right {
  width: 447px;
  height: 59px;
  float: right;
  position: relative;
  overflow: hidden;
}
.Header_tubiao {
  width: 200px;
  height: 55px;
  padding-top: 5px;
  float: left;
  // line-height: 60px;
  // margin-left: 5px;
  color: $white;
  font-size: $font-size-large;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.ll {
  width: 150px;
  height: 55px;
  float: left;
  margin-left: 15px;
  overflow: hidden;
}
.Header_img {
  width: 150px;
  height: 55px;
}
.img {
  width: 45px;
  height: 24px;
  vertical-align: middle;
}
.jh {
  display: inline-block;
}
.imgs {
  width: 45px;
  height: 24px;
  float: left;
  margin-right: 10px;
  // margin-left: 30px;
  margin-top: 15px;
}
.imgs img {
  width: 45px;
  height: 24px;
}
.tu_top {
}
.rights {
  float: left;
  margin-top: 14px;
  color: #fff;
}
.hy {
  margin-bottom: 5px;
}
.rr {
  position: relative;
  width: 13px;
  height: 7px;
  float: right;
  margin-top: 14px;
  margin-right: 10px;
  transform: rotate(180deg);
}
.rr img {
  position: absolute;
  left: 0px;
  top: -10px;
  width: 13px;
  height: 7px;
}
.sc {
  position: relative;
  width: 13px;
  height: 7px;
  float: right;
  margin-top: 10px;
  margin-right: 10px;
  transform: rotate(360deg);
}
.sc img {
  position: absolute;
  left: 0px;
  top: 9px;
  width: 13px;
  height: 7px;
}
.red {
  overflow: hidden;
  color: #fff;
  width: 176px;
  height: 50px;
  background-color: $Header_color;
  position: fixed;
  top: 60px;
  left: 0px;
  z-index: 1000;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 24px;
}
.reds {
  overflow: hidden;
  width: 200px;
  height: 60px;
  background-color: $Header_color;
  position: fixed;
  top: 120px;
  left: 0px;
  z-index: 1000;
  cursor: pointer;
}
.red:hover {
  background-color: rgba(211, 42, 42, 1);
}
.reds:hover {
  background-color: rgba(211, 42, 42, 1);
}
.Header_mingcheng {
  width: 25%;
  height: 60px;
  float: left;
  line-height: 60px;
  margin-left: 5px;
  color: $white;
  font-size: $font-size-large;
  text-align: center;
  min-width: 248px;
}
.Header_time {
  color: $white;
  width: 31%;
  height: 58px;
  font-size: $font-size-medium;
  margin-top: 0px;
  line-height: 60px;
  text-align: center;
  float: left;
  min-width: 323px;
}
.Header_company {
  height: 58px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  min-width: 155px;
  cursor: pointer;
}
.Header_company:hover {
  background-color: rgba(211, 42, 42, 1);
}
.Header_setup {
  width: 8%;
  height: 58px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  min-width: 155px;
  cursor: pointer;
}
.Header_setup:hover {
  background-color: rgba(211, 42, 42, 1);
}
.Header_signout {
  width: 8%;
  height: 58px;
  display: inline-block;
  margin-right: 10px;
  text-align: center;
  min-width: 92px;
  cursor: pointer;
}
.Header_signout:hover {
  background-color: rgba(211, 42, 42, 1);
}
.Header_Icon {
  height: 26px;
  width: 26px;
  border-radius: 50%;
  vertical-align: middle;
}
.Header_apan {
  height: 59px;
  font-size: $font-size-medium;
  color: $white;
  line-height: 58px;
  display: inline-block;
}
.Header_tu {
  width: 120px;
  height: 122px;
  float: right;
  margin-right: -7%;
}
.sher {
  float: right;
  margin-right: 10%;
}
.el-header {
  padding: 0 0px;
}
.color_box {
  width: 5px;
  height: 20px;
  background-color: $Header_color;
  position: absolute;
  top: 22px;
  left: 10px;
}
.ebb {
  text-align: center;
}
.toux {
  height: 150px;
  line-height: 150px;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  padding-left: 30px;
  margin-bottom: 20px;
}
.toux .span {
  color: #505050;
  margin-right: 10px;
}
.toux .imgsd {
  width: 100px;
  height: 100px;
  vertical-align: middle;
  display: inline-block;
}
.imgsd img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.toux .span1d {
  color: #ccc;
  margin-right: 10px;
  // float: right;
}
.hezi {
  float: right;
  width: 150px;
  height: 150px;
  line-height: 150px;
  position: relative;
}
.toux .img1d {
  // float: right;
  display: inline-block;
  width: 36px;
  height: 36px;
  transform: rotate(90deg);
  position: absolute;
  top: 58px;
  right: -15px;
}
.toux .img1d img {
  width: 36px;
  height: 36px;
}
</style>
